<template>
  <div class="bg">
    <div class="wraps">
      <ul class="wrap-list">
        <li v-for="(item, index) in imgArr" :key="index">
          <router-link
            style="cursor: pointer"
            :to="{ name: 'DetailPage', params: { name: item.title } }"
          >
            <img :src="item.img" alt="" />
            <span>{{ item.title }}</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="page">
      <Pages :page="maxPage" />
    </div>
  </div>
</template>

<script>
import Pages from "../../components/Pages";
export default {
  components: {
    Pages,
  },
  data() {
    return {
      imgArr: [],
      num: 1,
      maxPage: 1,
    };
  },
  methods: {
    // 网络请求
    http(id) {
      this.$api
        .BlueBerryJamInfo({
          blueBerryjam_id: id,
        })
        .then((res) => {
          if (res.data.success) {
            var arr = res.data.blueBerryJam;
            for (var i = 0; i < arr.length; i++) {
              arr[i].img =
                "http://iwenwiki.com/api/" + String(arr[i].img).slice(24);
            }
            this.imgArr = arr;
          } else {
            this.maxPage = Number(String(res.data.maxPage) + "0");
          }
        });
    },

  },
  mounted() {
    this.http(this.num);
    this.http(10);
    this.$bus.$on("pageVal", (data) => {
      this.http(data);
    });
  },
};
</script>

<style lang="less" scoped>
.bg {
  background-color: #f2f2f2;
}
.wraps {
  width: 1200px;
  padding: 25px 0;
  margin: 10px;
  background-color: #fff;
  overflow: hidden;
  margin: 50px auto;
}
.wrap-list {
  /* margin-right: 10px; */
  margin: 0 auto;
}
.wrap-list li {
  float: left;
  margin: 10px 15px;
  position: relative;
}
.wrap-list img {
  width: 210px;
  height: 210px;
}
.wrap-list span {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 6px;
  padding: 5px 10px;
}
.page {
  padding-bottom: 20px;
}
</style>